科技新知
純文字圖案 | 懶人出圖工具
早前，筆者就介紹過 Markdown / mdbook 等說明檔編寫工具，也分享過用於制於遊戲攻略時，如何加上插圖的情況。那怕是教學、說明、遊戲攻略，使用圖表的方式表達，的確有助於讀者理解。
在Markdown的技術上，圖文並茂是可以的，只是不太方便而已。以制作及修改的成本來講，出【圖】可能都不算最難，更麻煩的是管理。
怎樣教對？點開圖檔整個閱讀？。怎樣搜尋圖片，可以加附註嗎？更新後名字該怎樣取？
老實講，如果可以，有些【圖】，直接經文字轉譯成圖表就最好。
mermaid
Markdown 轉成圖，其實坊間早就有一些免費的工具，筆者選擇了 Github 也預設支援的 mermaid 。廢話不多說，直接送出 web 版的編輯工具。
使用它的好處
- Github markdown 直接支援，mdbook經插件也可以使用。
- 易於編寫，也易於閱讀
- 有支援IT其他範疇的圖表，例如ER，State。
- 有支援更多其他範疇的圖表，例如gantt，mindmap。
使用它的問題
- 不支援手動調整位置，全部靠自動調整
ascii chart
若想要更多的位置掌控，其實我們可以回到過去BBS的年代，用文字方塊來砌圖。這個方法很有局限，但也不是完全不能用。
廢話不多說，直接送出 web 版的編輯工具。
使用它的好處
- 任意手繪圖表
使用它的問題
- 使用中文等字元，還要考慮是否等寛字型問題。
- 修改文字長度，邊界要重畫。
筆者有試過用來制作遊戲簡略地圖說明，這是比不斷截圖來要得更直觀。但限制就是不要在圖中加入文字，加入英數等符號就算了，再於其他地方加以解釋。如果我們必需在圖中使文字，我們就要控制輸出字型為等寛字型，例如使用【細明體】，就無問題了。不然就要全部使用中文字元(全型符號)，不要混合英數。
.-=.
.:*%%+.:.
:#%%%%%+#.
:#%%%%%%%%%%*.
.*%%%%%%%%%%%%%%%*+-..
.-%%%%%%%%%%%%%%%%%%%%%%*:.
.-%%%%%%%%%%%%%%%%%%%%%%%%%%-.
.=%%%%%%*=-::::::::::::::-=#%%#:
:#%%*-:::::::::::::::::::::::-*%+.
.*#=-:::::::::::--=========-::::-#+.
.=#==-::::-=*%%%%%%%%%%%%%%%%%%=::-#-.
.#*==--#%%%%%%%%%%%%%%%#..#%%%%%+::**.
:#+==#%%%=.+%%%%%%%%%#-:**::+%%%#-:=--*=
.-+#*=+%%#.=%+.+%%%%%%%#--====*%%%#-::::-*.
:*====+%%%%#.-%%%%%%%%%%%%-:+%%%%%*::::-*:
.*=====#%%%%%%%%%####%%%%%%%%%%%%*::-%+.
.:##==#%%%%+-:::::::::::--===-::::##.
.##====-::::::::::::=#-:::::::-##.
.*%*====---==+**#*+=::::::::+%+.
.-#%#+====-:-----::::::-+%%#:.
:#%%%%#*+===---+*%%%%%*.
..:=#%%%%%%%%%%%%%+:.
..::---:...
